<template>
  <div>
    <div class="box">
      <div class="header">
        <img src="../../img/1.jpg" alt="" />
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          style="width: 100px"
        />
        <p class="one">打开APP</p>
      </div>

      <div class="content">
        <div class="top">
          <ul>
            <li>精选</li>
            <li>精选</li>
            <li>精选</li>
            <li>精选</li>
            <li>精选</li>
            <li>精选</li>
            <li>精选</li>
            <li>精选</li>
          </ul>
        </div>
        <div class="swiper">
          <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
              <img :src="image" style="width: 100%; height: 200px" />
            </van-swipe-item>
          </van-swipe>
        </div>

        <div class="top2">
          <van-grid>
            <van-grid-item :icon="require('../../img/2.jpg')" text="车型大全" />
            <van-grid-item :icon="require('../../img/3.jpg')" text="排行榜" />
            <van-grid-item :icon="require('../../img/4.jpg')" text="车友圈" />
            <van-grid-item :icon="require('../../img/5.jpg')" text="二手车" />
          </van-grid>
        </div>

        <div class="top3">
           <h5>热门车系</h5>
           <span>|</span>
           <span>热门品牌</span>
            <p>更多车系</p>

            <div class="top4">
                <ul>
                   <li>轿车</li>
                    <li>轿车</li>
                     <li>轿车</li>
                      <li>轿车</li>
                </ul>
           
            </div>
           
        </div>
         <div class="top5">
                 <van-grid>
            <van-grid-item :icon="require('../../img/6.jpg')" text="车型大全 da1" />
            <van-grid-item :icon="require('../../img/7.jpg')" text="排行榜 90" />
            <van-grid-item :icon="require('../../img/8.jpg')" text="车友圈 90" />
   
          </van-grid>
            </div>

            <div class="top6">
               <h5>华为比亚迪胡军，哈佛啊离开0分</h5>
               <img src="../../img/9.jpg" alt="">
               <p>6小时前 5,2万播放量</p>
               <p id='one'>打开懂车顶App</p>
            </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const images = [
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
  require('../../img/1.jpg'),
  require('../../img/7.jpg'),
];
</script>

<style lang="scss" scoped>
.top3{
  
  h5{
    float: left;
  }
  p{
    float: right;
  }
  .top4 li{
    float: left;
    width: 60px;
    height: 40px;
     margin-left: 10px;
     background: #f5f6fa;
     line-height: 40px;
     text-align: center;
  }
}
#one{
  width: 100px;
  height: 40px;
  border-radius: 15px;
  background: #fecb45;
  font-size: 12px;
  line-height: 40px;
  text-align: center;
  
  float: right;
}
</style>
